<template>
  <el-col :span="6" :xs="24">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <div>
        <div class="text-center">
          <userAvatar/>
        </div><div class="pull-right" style="font-size: 35px">{{ user.userName }}</div>
        <ul class="list-group list-group-striped" style="margin-top: 40px">
          <li class="list-group-item">
            <svg-icon icon-class="user"/>
            <el-button type="text" @click="myArchives">我的档案</el-button>
            <el-dialog title="我的档案" style="text-align: center" :visible.sync="outerVisible" width="80%" :before-close="handleClose">
               <span v-if="messageCode === 500">
                <img src="/no_message.png" style="width: 300px;height: 350px;" alt=""><br><br><span style="color: red;text-align: center;">您还没有档案哦</span><br><br>
                <el-button type="primary" @click="add">添加档案</el-button>
                 <el-dialog title="我的档案" style="text-align: center" :visible.sync="dialogForm">
              <el-form :model="form">
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;text-align: left;">[主要症状]</span>
                  <el-input v-model="form.mainSymptom" placeholder="请输入您的主要症状" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[现病史]</span>
                  <el-input v-model="form.nowIllness"  placeholder="请输入您的当前病状"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[既往病史]</span>
                  <el-input v-model="form.oldIllness"  placeholder="请输入您的既往病史" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[治疗经历]</span>
                  <el-input v-model="form.latelyHeal"  placeholder="请输入医院名称" autocomplete="off"></el-input>
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker
                      v-model="form.startHeal"
                      align="right"
                      type="date"
                      placeholder="请选择治疗开始时间"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                  </div>
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker
                      v-model="form.endHeal"
                      align="right"
                      type="date"
                      placeholder="请选择治疗结束时间"
                      :picker-options="pickerOptionsEnd">
                    </el-date-picker>
                  </div>
                  <el-input v-model="form.healCourse"  placeholder="请输入治疗过程" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[相关图片]</span>
                  <el-upload
                    action="/dev-api/file/upload?type=4"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :headers=headers>
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
<!--                  <el-input v-model="form.prices" autocomplete="off"></el-input>-->
                </el-form-item>
                <el-form-item>
                     <el-button class="btn btn-primary" type="info" @click="addArchives(form)">添加档案</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
              </span>
<!--              列表-->
              <el-form v-else :model="form">
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;text-align: left;">[主要症状]</span>
                  <el-input v-model="form.mainSymptom"  autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[现病史]</span>
                  <el-input v-model="form.nowIllness"  autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[既往病史]</span>
                  <el-input v-model="form.oldIllness"  autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[治疗经历]</span>
                  <el-input v-model="form.latelyHeal"  autocomplete="off" disabled></el-input>
                  <el-input v-model="form.startHeal"  autocomplete="off" disabled></el-input>
                  <el-input v-model="form.endHeal"  autocomplete="off" disabled></el-input>
                  <el-input v-model="form.healCourse"  autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <span style="color: blue;">[相关图片]</span>
                  <div v-for="item in form.prices">
                    <img alt="图片损坏" :src="item" style="width: 50px;height: 50px"/>
                  </div>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                  <el-button type="primary" @click="deleteOne(form.archivesId)">删 除 档 案</el-button>
                </el-form-item>
              </el-form>
<!--              编辑档案-->
              <el-dialog  title="我的档案" :visible.sync="innerVisible" append-to-body style="text-align: center">
                      <el-form :model="form">
                        <el-form-item label="" :label-width="formLabelWidth">
                          <span style="color: blue;text-align: left;">[主要症状]</span>
                          <el-input v-model="form.mainSymptom"  autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="" :label-width="formLabelWidth">
                          <span style="color: blue;">[现病史]</span>
                          <el-input v-model="form.nowIllness"  autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="" :label-width="formLabelWidth">
                          <span style="color: blue;">[既往病史]</span>
                          <el-input v-model="form.oldIllness"  autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="" :label-width="formLabelWidth">
                          <span style="color: blue;">[治疗经历]</span>
                          <el-input v-model="form.latelyHeal"  placeholder="请输入医院名称" autocomplete="off"></el-input>
                          <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker
                              v-model="form.startHeal"
                              align="right"
                              type="date"
                              placeholder="请选择治疗开始时间"
                              :picker-options="pickerOptions">
                            </el-date-picker>
                          </div>
                          <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker
                              v-model="form.endHeal"
                              align="right"
                              type="date"
                              placeholder="请选择治疗结束时间"
                              :picker-options="pickerOptionsEnd">
                            </el-date-picker>
                          </div>
                          <el-input v-model="form.healCourse"  placeholder="请输入治疗过程" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="" :label-width="formLabelWidth">
                          <span style="color: blue;">[相关图片]</span>
                            <img width="100%" v-for="item in form.prices" :src="item" @click="doPic(item)">
                          <el-upload
                            action="/dev-api/file/upload?type=4"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :headers=headers>
                            <i class="el-icon-plus"></i>
                          </el-upload>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="preserve(form)">保 存</el-button>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                      </div>
              </el-dialog>
              <div slot="footer" class="dialog-footer">
                <span v-if="this.messageCode !== 500">
                  <el-button type="primary" @click="edit">编辑档案</el-button>
                </span>
              </div>
            </el-dialog>

          </li>
          <li class="list-group-item">
            <i class="fas fa-heart my-icon"></i>
            <el-button type="text" @click="myFollow">我的关注</el-button>
          </li>
          <li class="list-group-item">
            <i class="fas fa-wallet my-icon2"></i>
            <el-button type="text" @click="myQianbao">我的钱包</el-button>
          </li>
        </ul>

      </div>
    </el-card>
  </el-col>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
// main.js 或其他入口文件
import '@fortawesome/fontawesome-free/css/all.css';
import userAvatar from "@/views/system/user/profile/userAvatar.vue";
import {getUserProfile} from "@/api/system/user";
import {addArchives, archivesList, delArchives, updateUser} from "@/api/patient/patient";
import {getToken} from "@/utils/auth";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {
      userAvatar
    },
    props: {},
    data() {
      //这里存放数据"
      return {
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        user: {},
        form:{
          prices:[],
        },
        messageCode:'',
        showDialog: true,
        dialogFormVisible: false,
        dialogForm: false,
        dialog: false,
        outerVisible: false,
        innerVisible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        formLabelWidth: '120px',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        doPic(item){
          if (confirm("确定要删除吗?")){
            let index= this.form.prices.indexOf(item)
            if (index>-1){
              this.form.prices.splice(index,1)
              alert("删除成功")
            }
          }else {
            alert("取消成功")
          }
        },
        pickerOptionsEnd:{
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
          },
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      handleClose(done) {
        // 执行一些逻辑操作
        // 比如验证表单数据、保存数据等

        // 调用 done() 方法关闭对话框
        done();
      },
      myQianbao(){
        this.$router.push('/patient/QB')
      },
      myFollow(){
        this.$router.push('/patient/GZ')
      },
      handleSuccess(response){
        this.form.prices.push(response.data.url)
          console.log(this.form.prices)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      deleteOne(archivesId){
        delArchives(archivesId).then(response => {
          if (response.code === 200) {
            this.$message({
              message: response.data,
              type:'success'
            });
            this.dialogForm = false;
            this.outerVisible  = false;
          }
        })
      },
      preserve(form) {
        console.log(form);
        updateUser(form).then(response => {
          if (response.code === 200) {
            this.$message({
              message: response.data,
              type:'success'
            });
            this.innerVisible = false;
            this.outerVisible  = false;
          }
        })
      },
      edit(){
        this.innerVisible = true;
      },
      addArchives(form){
        console.log(form);
        addArchives(form).then(response => {
          if (response.code === 200) {
            this.$message({
              message: response.msg,
              type:'success'
            });
            this.dialogForm = false;
            this.outerVisible  = false;
          }
        });
      },
      add(){
        this.dialogForm = true;
      },
      /** 档案 */
      myArchives() {
        this.outerVisible = true;
        this.loading = true;
        archivesList().then(response => {
          console.log(response)
          if (response.code === 500) {
            this.messageCode = response.code;
            console.log(this.messageCode)
          }else {
            this.form = response.data;
          }
          this.loading = false;
        });
      },
      getUser() {
          getUserProfile().then(response => {
              this.user = response.data.sysUser;
          });
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getUser();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {

    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

.my-icon {
  color: red;
}
.my-icon2 {
  color: greenyellow;
}

@media only screen and (max-width: 768px) {
  /* 在小屏幕设备上应用以下样式 */
  .el-dialog {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .el-dialog__header {
    padding: 10px 20px !important;
  }
  .el-dialog__body {
    padding: 20px !important;
  }
  .el-dialog__footer {
    padding: 10px 20px !important;
  }
}

@media only screen and (min-width: 769px) {
  /* 在大屏幕设备上应用以下样式 */
  .el-dialog {
    max-width: 80% !important;
  }
}
</style>
